<template>
  <el-form-item label="新值">
    <el-date-picker
      style="width: 100%"
      v-if="!isLimited && dataType == 'DATE'"
      type="date"
      placeholder="选择日期"
      v-model="value"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
    >
    </el-date-picker>
    <el-input
      v-if="!isLimited && dataType == 'NUMBER'"
      type="number"
      v-model="value"
    ></el-input>
    <el-input
      v-if="!isLimited && dataType == 'TEXT'"
      type="text"
      v-model="value"
    ></el-input>
    <el-select v-if="isLimited" style="width: 100%" v-model="value">
      <el-option
        v-for="(item, i) in dataOptions"
        :key="i"
        :label="item"
        :value="item"
      ></el-option>
    </el-select>
  </el-form-item>
</template>

<script>
export default {
  name: "inputBox",
  props: {
    dataID: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      value: "",
    };
  },
  computed: {
    configList() {
      return this.$store.state.dataConfig;
    },
    dataConfig() {
      return this.configList[this.dataID];
    },
    dataType() {
      return this.dataConfig.type;
    },
    isLimited() {
      return this.dataConfig.is_limited;
    },
    dataOptions() {
      return this.dataConfig.options;
    },
  },
  methods: {
    setValue() {
      this.$emit("setValue", this.value);
    },
  },
  watch: {
    value() {
      this.setValue();
      window.console.log("...");
    },
  },
};
</script>